import { defineComponent, ref } from 'vue'
import { ElDivider as Divider } from 'element-plus'
export default defineComponent({
  name: 'deivcesImage',
  setup() {
    const images: any = import.meta.glob(['@/assets/光伏施工管理系统/*'], {
      eager: true,
    })
    console.log('images', images)
    let title = ref('')
    const renderImages = () => {
      return (
        <>
          {Object.keys(images).map((url: any) => {
            const name = url
              .split('/')
              .pop()
              .replace(/\.\w+$/, '')
            title.value += ',' + name
            return (
              <>
                <div
                  id={name}
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                  }}
                >
                  <h3>{name}</h3>
                  <img
                    src={images[url].default}
                    style={{
                      width: '80%',
                    }}
                  />
                </div>
              </>
            )
          })}
        </>
      )
    }

    const renderTitle = () => {
      return [...new Set(title.value.split(','))].map((name: any, index) => (
        <>
          <a
            style={{
              fontSize: '12px',
            }}
            href={`#${name}`}
          >
            {name}
          </a>
          {index % 20 === 0 ? null : (
            <Divider
              style={{
                backgroundColor: 'red',
              }}
              direction="vertical"
            />
          )}
        </>
      ))
    }

    return () => (
      <>
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
          }}
        >
          {title.value ? renderTitle() : null}
        </div>
        {renderImages()}
      </>
    )
  },
})
